<template>
  <div class="relative min-h-screen">
    <!-- 动态背景 -->
    <div class="particles-background"></div>
    <div class="noise-overlay"></div>
    <div class="sun-element"></div>
    <div class="cloud-element cloud-left"></div>
    <div class="cloud-element cloud-right"></div>
    <div class="cloud-element cloud-top-left"></div>
    <div class="cloud-element cloud-top-right"></div>
    <div class="cloud-element cloud-bottom-left"></div>
    <div class="cloud-element cloud-bottom-right"></div>
    
    <!-- 系统公告 -->
    <UpdateNotice 
      :new-opportunities="15" 
      :updated-opportunities="8" 
      @close="handleNoticeClose" 
    />
    
    <!-- 主内容区 -->
    <div class="relative z-10">
      <!-- 欢迎区域 -->
      <div class="hero-section relative overflow-hidden min-h-[90vh] flex items-center justify-center">
        <div class="absolute inset-0 hero-gradient"></div>
        <div class="absolute inset-0 hero-shapes"></div>
        
        <div class="container mx-auto px-4 z-10">
          <div class="max-w-4xl mx-auto text-center">
            <div class="hyperboost-logo mb-4">
              <h1 class="hyperboost-title animate-float">
                HyperBoost
              </h1>
              <h2 class="chinese-name">破局计划</h2>
            </div>
            
            <p class="text-xl md:text-3xl text-gray-800 max-w-3xl mx-auto leading-relaxed mb-12 hero-subtitle-text animate-fadeIn">
              <span class="text-blue-600 font-bold">打破信息差，修得自律功。</span>
            </p>
            
            <div class="flex justify-center animate-fadeIn">
              <button class="explore-btn" @click="handleExploreClick">
                开始探索
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 主轮播图区域 -->
      <div class="py-16 relative feature-section overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-b from-blue-50 via-blue-50/50 to-white"></div>
        <div class="absolute top-0 left-0 right-0 h-32 bg-blue-50/80 backdrop-blur-sm -skew-y-2 transform -translate-y-16"></div>
        <div class="absolute bottom-0 right-0 w-1/2 h-96 bg-blue-100/30 rounded-full filter blur-3xl opacity-50"></div>
        <div class="absolute top-20 left-10 w-24 h-24 bg-blue-200/20 rounded-full filter blur-xl"></div>
        <div class="absolute top-40 right-20 w-16 h-16 bg-indigo-200/20 rounded-full filter blur-lg"></div>
        
        <div class="container mx-auto px-4 relative z-10">
          <div class="grid grid-cols-1 md:grid-cols-12 mb-8">
            <div class="md:col-span-6 text-left">
              <h2 class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 mb-3 leading-tight">
                核心功能
              </h2>
              <div class="w-24 h-1 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 mb-4"></div>
              <p class="text-xl text-gray-700 max-w-2xl leading-relaxed">整合前沿学习资源与高价值发展机遇，构建个性化成长路径，助您精准定位发展方向，实现个人能力的阶梯式跃升。</p>
            </div>
          </div>
          
          <el-carousel 
            height="500px" 
            :interval="6000"
            indicator-position="outside"
            :autoplay="true">
            <el-carousel-item v-for="item in carouselItems" :key="item.id"
              class="feature-card">
              <div class="grid grid-cols-1 md:grid-cols-2 h-full">
                <div class="flex flex-col justify-center p-6 md:p-12 order-2 md:order-1 bg-white/80 backdrop-blur-sm">
                  <div class="feature-tag mb-4 inline-flex">
                    <span class="bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm font-medium">{{ item.tag }}</span>
                  </div>
                  <h3 class="text-2xl md:text-4xl font-bold text-gray-900 mb-4 leading-tight animate-slideUp">{{ item.title }}</h3>
                  <p class="text-lg text-gray-700 mb-6 animate-slideUp delay-100 leading-relaxed">{{ item.description }}</p>
                  <div class="feature-benefits mb-6">
                    <div v-for="(benefit, idx) in item.benefits" :key="idx" class="flex items-center mb-2">
                      <div class="flex-shrink-0 w-6 h-6 rounded-full bg-blue-50 flex items-center justify-center mr-3">
                        <el-icon class="text-blue-600" :size="14"><Check /></el-icon>
                      </div>
                      <span class="text-gray-700">{{ benefit }}</span>
                    </div>
                  </div>
                  <button class="feature-btn w-fit animate-slideUp delay-200">
                    立即体验
                    <el-icon class="ml-2"><ArrowRight /></el-icon>
                  </button>
                </div>
                <div class="relative overflow-hidden order-1 md:order-2 rounded-2xl shadow-xl">
                  <div class="absolute inset-0 feature-img-overlay"></div>
                  <img :src="item.image" :alt="item.title" 
                    class="w-full h-full object-cover" />
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <!-- 数据统计区 -->
      <div class="py-16 statistics-section relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-b from-white to-gray-50"></div>
        <div class="absolute top-0 left-0 w-32 h-32 bg-blue-100/30 rounded-full filter blur-xl"></div>
        <div class="absolute bottom-0 right-0 w-48 h-48 bg-indigo-100/20 rounded-full filter blur-2xl"></div>
        <div class="container mx-auto px-4 relative z-10">
          <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
            <div class="text-center" v-for="stat in statistics" :key="stat.label">
              <div class="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-green-500 mb-2">
                {{ stat.value }}{{ stat.unit }}
              </div>
              <div class="text-gray-600">{{ stat.label }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 机会轮播区 -->
      <div class="py-16 opportunities-section relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-b from-gray-50 to-blue-50/50"></div>
        <div class="absolute top-0 left-0 w-32 h-32 bg-blue-100/50 rounded-full filter blur-xl transform -translate-x-1/2 -translate-y-1/2"></div>
        <div class="absolute bottom-0 right-0 w-64 h-64 bg-blue-100/40 rounded-full filter blur-2xl transform translate-x-1/4 translate-y-1/4"></div>
        <div class="container mx-auto px-4 relative z-10">
          <div class="grid grid-cols-1 md:grid-cols-12 mb-8">
            <div class="md:col-span-6 text-left">
              
              <h2 class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 mb-3 leading-tight">
                热门机会
              </h2>
              <div class="w-24 h-1 bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 mb-4"></div>
              <p class="text-xl text-gray-700 max-w-2xl leading-relaxed">实时更新名企实习、权威赛事与科研机会，所有机会均通过严格审核并标注截止时间，确保您不错过任何一个关键节点。</p>
            </div>
          </div>
          <el-carousel 
            :interval="4000"
            type="card"
            height="400px">
            <el-carousel-item v-for="item in opportunities" :key="item.id"
              class="opportunity-card">
              <div class="bg-white rounded-xl shadow-xl p-8 h-full">
                <div class="flex items-start justify-between mb-6">
                  <div>
                    <h3 class="text-xl font-bold mb-2">{{ item.title }}</h3>
                    <p class="text-gray-600">{{ item.company }}</p>
                  </div>
                  <el-tag :type="item.type" effect="light">{{ item.category }}</el-tag>
                </div>
                <p class="text-gray-700 mb-6">{{ item.description }}</p>
                <div class="flex justify-between items-center">
                  <span class="text-gray-500">截止日期：{{ item.deadline }}</span>
                  <el-button type="primary" text>查看详情</el-button>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <!-- AI助手展示区 -->
      <div class="py-24 ai-assistant-section relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-indigo-50 via-purple-50 to-pink-50"></div>
        <div class="absolute inset-0 ai-bg-pattern opacity-5"></div>
        <div class="absolute top-0 right-0 w-1/3 h-64 bg-indigo-100/30 rounded-full filter blur-3xl"></div>
        <div class="absolute bottom-0 left-0 w-1/4 h-48 bg-purple-100/20 rounded-full filter blur-2xl"></div>
        <div class="container mx-auto px-4 relative z-10">
          <div class="grid grid-cols-1 md:grid-cols-12 gap-12 items-center">
            <div class="md:col-span-6 space-y-8 animate-slideRight">
              <h2 class="text-4xl md:text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 leading-tight">
                智能学习助手<br/>随时为你解答
              </h2>
              
              <p class="text-xl text-gray-700 leading-relaxed">
                基于最新DeepSeek，为你提供24小时学习咨询、职业规划、考研指导等全方位服务。无论何时何地，你的专属导师都在身边。
              </p>
              
              <div class="ai-features space-y-5">
                <div v-for="feature in aiFeatures" :key="feature.id" 
                  class="ai-feature-item flex items-start space-x-4 p-4 rounded-xl transition-all hover:bg-indigo-50 hover:shadow-lg">
                  <div class="feature-icon flex-shrink-0 w-12 h-12 rounded-xl bg-gradient-to-br from-indigo-600 to-purple-600 flex items-center justify-center transform transition-transform hover:scale-110">
                    <el-icon class="text-white" :size="22"><component :is="feature.icon" /></el-icon>
                  </div>
                  <div>
                    <h4 class="text-xl font-bold text-gray-900 mb-1">{{ feature.title }}</h4>
                    <p class="text-gray-700">{{ feature.text }}</p>
                  </div>
                </div>
              </div>
              
              <button class="ai-btn transform hover:scale-105 transition-transform">
                <span>立即体验</span>
                <div class="ai-btn-glow"></div>
              </button>
            </div>
            
            <div class="md:col-span-6 relative">
              <div class="ai-chat-interface relative z-10 bg-white rounded-2xl shadow-2xl overflow-hidden transform hover:scale-[1.02] transition-all duration-300">
                <div class="ai-chat-header flex items-center p-6 bg-gradient-to-r from-indigo-600 to-purple-600">
                  <div class="flex items-center space-x-3">
                    <div class="w-12 h-12 rounded-full bg-white/20 backdrop-blur-sm flex items-center justify-center p-2">
                      <el-icon class="text-white" :size="24"><ChatDotRound /></el-icon>
                    </div>
                    <div>
                      <h4 class="font-bold text-white text-lg">AI智能助手</h4>
                      <div class="flex items-center">
                        <span class="inline-block w-2 h-2 rounded-full bg-green-400 mr-2 animate-pulse"></span>
                        <span class="text-sm text-white/80">在线</span>
                      </div>
                    </div>
                  </div>
                </div>
                
                <div class="ai-chat-messages p-8 space-y-8 bg-gray-50 h-[700px] overflow-y-auto">
                  <div class="user-message flex justify-end animate-fadeIn animation-delay-200">
                    <div class="message-bubble bg-gradient-to-r from-indigo-600 to-purple-600 text-white rounded-2xl rounded-tr-none py-4 px-6 shadow-md max-w-lg">
                      我想了解一下如何准备考研？
                    </div>
                    <div class="message-avatar ml-4 flex-shrink-0">
                      <div class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center p-2 shadow-lg">
                        <el-icon class="text-gray-600" :size="20"><User /></el-icon>
                      </div>
                    </div>
                  </div>
                  
                  <div class="ai-message flex animate-fadeIn animation-delay-400">
                    <div class="message-avatar mr-4 flex-shrink-0">
                      <div class="w-12 h-12 rounded-full bg-gradient-to-r from-indigo-600 to-purple-600 flex items-center justify-center p-2 shadow-lg">
                        <el-icon class="text-white" :size="20"><ChatDotRound /></el-icon>
                      </div>
                    </div>
                    <div class="message-bubble bg-white rounded-2xl rounded-tl-none py-4 px-6 text-gray-800 shadow-md max-w-lg">
                      准备考研需要关注以下几个方面：
                      <div class="mt-4 space-y-4">
                        <div class="text-lg mb-3">
                          1. 🎯 确定目标院校和专业：深入研究培养方向、师资力量和就业前景，选择最适合的专业方向。重点关注：
                          院校的学科优势和特色研究方向，
                          导师团队的研究成果和项目经历，
                          近年毕业生就业质量和发展轨迹
                        </div>
                        <div class="text-lg mb-3">
                          2. 📚 了解考试科目和内容：研读考试大纲，掌握重点难点，获取历年真题。建议：
                          制作各科目知识体系思维导图，
                          建立重难点题型专项训练库，
                          系统分析近五年真题的考察方向
                        </div>
                        <div class="text-lg mb-3">
                          3. ⏰ 制定合理的学习计划：根据个人情况，科学规划复习进度，注意劳逸结合。关键点：
                          设定每月、每周具体学习目标，
                          合理分配各科目复习时间比例，
                          预留机动时间应对突发情况
                        </div>
                        <div class="text-lg mb-3">
                          4. 📖 收集优质的学习资料：整理辅导书籍、视频课程和在线资源，重视基础知识。推荐：
                          选择适合自己的核心复习教材，
                          订阅权威考研资讯平台，
                          收藏优质在线课程和讲解视频
                        </div>
                        <div class="text-lg mb-3">
                          5. 👥 寻找学习伙伴和导师：加入考研交流群组，适时寻求专业指导。建议：
                          参与线上线下考研经验分享会，
                          定期与学习伙伴交流复习心得，
                          适时请教专业老师解决疑难
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              
              <div class="absolute inset-0 ai-chat-glow opacity-40 filter blur-3xl"></div>
              <div class="absolute inset-0 ai-chat-decoration pointer-events-none"></div>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部CTA区域 -->
      <div class="py-24 cta-section relative overflow-hidden">
        <div class="absolute inset-0 bg-gradient-to-br from-blue-600 via-indigo-600 to-indigo-800"></div>
        <div class="absolute inset-0 bg-pattern opacity-10"></div>
        <div class="absolute top-0 left-0 w-full h-12 bg-gradient-to-r from-blue-300/30 to-indigo-300/30 transform -skew-y-2"></div>
        <div class="absolute bottom-0 right-0 w-1/3 h-48 bg-indigo-400/30 rounded-full filter blur-3xl"></div>
        <div class="absolute top-1/4 left-1/4 w-12 h-12 bg-blue-300/30 rounded-full filter blur-xl"></div>
        <div class="absolute bottom-1/4 left-1/5 w-20 h-20 bg-purple-400/20 rounded-full filter blur-xl"></div>
        <div class="container mx-auto px-4 relative z-10">
          <div class="max-w-3xl mx-auto text-center">
            <div class="cta-card bg-white/10 backdrop-blur-sm p-12 rounded-3xl border border-white/20 shadow-lg">
              <div class="cta-icon mb-8 mx-auto">
                <div class="w-20 h-20 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 mx-auto flex items-center justify-center shadow-lg">
                  <el-icon class="text-white" :size="36"><Guide /></el-icon>
                </div>
              </div>
              <h2 class="text-4xl md:text-5xl font-bold text-white mb-6 leading-tight">准备好开始你的<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-200 to-indigo-100">破局计划</span>了吗？</h2>
              <p class="text-xl mb-10 text-blue-100 max-w-2xl mx-auto">加入我们，发现更多可能，与志同道合的伙伴一起成长</p>
              <button class="cta-button" @click="handleRegisterClick">
                <span class="relative z-10">立即注册</span>
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部版权信息 -->
      <footer class="footer-section relative overflow-hidden py-10">
        <div class="absolute inset-0 bg-gradient-to-b from-gray-900 to-gray-950"></div>
        <div class="absolute inset-0 bg-pattern opacity-5"></div>
        <div class="container mx-auto px-4 relative z-10">
          <!-- Logo与链接区域 -->
          <div class="grid grid-cols-1 md:grid-cols-12 gap-6 items-start mb-8">
            <!-- 品牌区 -->
            <div class="md:col-span-3 mb-6 md:mb-0 text-center md:text-left">
              <h3 class="text-3xl font-bold mb-3 text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-indigo-300">HyperBoost</h3>
              <p class="text-gray-400 text-base mb-4">打破信息差，助力大学生实现自律成长</p>
              <div class="flex space-x-3 justify-center md:justify-start">
                <a href="#" class="footer-social-link">
                  <el-icon :size="18"><Platform /></el-icon>
                </a>
                <a href="#" class="footer-social-link">
                  <el-icon :size="18"><Share /></el-icon>
                </a>
                <a href="#" class="footer-social-link">
                  <el-icon :size="18"><Link /></el-icon>
                </a>
              </div>
            </div>

            <!-- 快捷链接 -->
            <div class="md:col-span-3">
              <h4 class="footer-heading text-white font-semibold mb-3 text-lg">网站服务</h4>
              <ul class="footer-menu">
                <li class="mb-3"><a href="#" class="footer-link text-base">机会平台</a></li>
                <li class="mb-3"><a href="#" class="footer-link text-base">经验分享</a></li>
                <li class="mb-3"><a href="#" class="footer-link text-base">AI助手</a></li>
              </ul>
            </div>
            
            <div class="md:col-span-3">
              <h4 class="footer-heading text-white font-semibold mb-3 text-lg">支持帮助</h4>
              <ul class="footer-menu">
                <li class="mb-3"><a href="#" class="footer-link text-base">常见问题</a></li>
                <li class="mb-3"><a href="#" class="footer-link text-base">使用指南</a></li>
                <li><a href="#" class="footer-link text-base">问题反馈</a></li>
              </ul>
            </div>

            <div class="md:col-span-3">
              <h4 class="footer-heading text-white font-semibold mb-3 text-lg">联系我们</h4>
              <ul class="footer-menu">
                <li class="mb-3"><a href="#" class="footer-link text-base">电话：12345678910</a></li>
                <li class="mb-3"><a href="#" class="footer-link text-base">邮箱：hyperboost@qq.com</a></li>
                <li class="mb-3"><a href="#" class="footer-link text-base">公众号：HyperBoost666</a></li>
              </ul>
            </div>
          </div>
          
          <!-- 联系方式 -->
          <div class="flex flex-col justify-center items-center border-t border-gray-800 pt-6 text-center">
            <!-- 底部版权 -->
            <div class="flex flex-col items-center text-gray-500">
              <p class="mb-4 text-base">© 2025 HyperBoost. 保留所有权利。</p>
              <div class="flex justify-center">
                <a href="#" class="mx-2 hover:text-gray-300 transition text-base">隐私政策</a>
                <span class="mx-2">|</span>
                <a href="#" class="mx-2 hover:text-gray-300 transition text-base">服务条款</a>
                <span class="mx-2">|</span>
                <a href="#" class="mx-2 hover:text-gray-300 transition text-base">豫ICP备xxxxxxxx号-1</a>
              </div>
            </div>
          </div>
        </div>
      </footer>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/user'
import { Calendar, Trophy, Share, Check, Platform, ArrowRight, Location, Timer, 
  ChatDotRound, User, Position, ChatLineSquare, Message, Link, Right, Document, Guide } from '@element-plus/icons-vue'
import UpdateNotice from '@/components/UpdateNotice.vue'

// 获取路由和用户store
const router = useRouter()
const userStore = useUserStore()

// 轮播图数据
const carouselItems = ref([
  {
    id: 1,
    title: '智能学习助手',
    description: '基于最新AI技术，为你定制个性化学习计划，解答难题，提供学习建议',
    image: 'https://img.freepik.com/free-photo/ai-technology-microchip-background-digital-transformation-concept_53876-124669.jpg?w=1380&t=st=1718517264~exp=1718517864~hmac=b26d38b85cf8c38e5af6bd97e00aa5a84d88979d55e52811c7f229739e8cde2c',
    tag: '智能服务',
    benefits: [
      '24小时智能问答服务',
      '个性化学习计划制定',
      '考试复习资料整理'
    ]
  },
  {
    id: 2,
    title: '发现优质机会',
    description: '汇聚实习、竞赛、考研等多维度发展机会，为你匹配最适合的选择',
    image: 'https://img.freepik.com/free-photo/business-team-meeting-working-project-cafe_155003-7546.jpg?w=1380&t=st=1718517342~exp=1718517942~hmac=76edd70e00d0db77e82e65c2a44a03e8ba3c6e82a8ebb30a8c7a4d1b4c3e0f07',
    tag: '资源整合',
    benefits: [
      '名企实习内推机会',
      '高含金量竞赛信息',
      '考研经验和资料分享'
    ]
  },
  {
    id: 3,
    title: '经验分享社区',
    description: '连接优秀同学，分享成长经验，建立人脉网络，共同进步',
    image: 'https://img.freepik.com/free-photo/small-group-students-working-together-project_23-2149189147.jpg?w=1380&t=st=1718517385~exp=1718517985~hmac=d69a6ca8ffc6d3e9f27bbe7b9d21359cbbe61ecb71e44ee3b979b95c6a58ef63',
    tag: '社区交流',
    benefits: [
      '高质量经验分享',
      '行业大咖直播',
      '同专业学习小组'
    ]
  }
])

// 数据统计
const statistics = ref([
  { label: '注册用户', value: '50', unit: 'K+' },
  { label: '累计机会', value: '1000', unit: '+' },
  { label: '成功案例', value: '500', unit: '+' },
  { label: '活跃社区', value: '100', unit: 'K+' }
])

// 热门机会
const opportunities = ref([
  {
    id: 1,
    title: '字节跳动前端开发实习生',
    company: '字节跳动',
    location: '北京',
    category: '实习',
    type: 'primary',
    description: '参与抖音电商核心业务开发，享受导师1v1指导',
    deadline: '2024-04-30',
    tags: ['前端开发', 'Vue', 'React', '实习']
  },
  {
    id: 2,
    title: '2024互联网+大赛校内选拔',
    company: '教务处',
    location: '线上',
    category: '竞赛',
    type: 'success',
    description: '年度最具含金量的创新创业赛事，丰厚奖金等你来',
    deadline: '2024-05-15',
    tags: ['创新创业', '比赛', '奖金']
  },
  {
    id: 3,
    title: '考研经验分享会',
    company: '研究生院',
    location: '线上',
    category: '考研',
    type: 'warning',
    description: '邀请多位考研成功学长学姐分享备考经验',
    deadline: '2024-03-20',
    tags: ['考研', '经验分享', '备考']
  },
  {
    id: 4,
    title: '腾讯云开发者大会',
    company: '腾讯云',
    location: '深圳',
    category: '活动',
    type: 'info',
    description: '探索云原生、AI等前沿技术，与业内大咖面对面交流',
    deadline: '2024-04-10',
    tags: ['技术峰会', '云计算', 'AI']
  }
])

// AI功能特点
const aiFeatures = ref([
  { 
    id: 1, 
    title: '智能答疑解惑',
    text: '24小时智能问答服务，快速解决学习难题',
    icon: 'ChatDotRound'
  },
  { 
    id: 2, 
    title: '学习规划制定',
    text: '根据个人情况定制学习计划，提高学习效率',
    icon: 'Calendar'
  },
  { 
    id: 3, 
    title: '多场景学习助手',
    text: '考研、实习、竞赛等多场景专业指导',
    icon: 'Guide'
  }
])

// 处理"开始探索"按钮点击事件
const handleExploreClick = () => {
  if (userStore.isLoggedIn) {
    // 用户已登录，跳转到机会页面
    router.push('/opportunity')
  } else {
    // 用户未登录，跳转到登录页面
    router.push('/auth/login')
  }
}

// 处理"立即注册"按钮点击事件
const handleRegisterClick = () => {
  router.push('/auth/register')
}

// 处理公告关闭
const handleNoticeClose = () => {
  console.log('公告已关闭');
};
</script>

<style scoped>
/* 基础样式 */
:root {
  --primary-gradient: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%);
  --secondary-gradient: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  --accent-gradient: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
}

/* 小太阳效果 */
.sun-element {
  position: absolute;
  top: 2%;
  right: 20%;
  width: 20px;
  height: 20px;
  background: #f59e0b;
  border-radius: 50%;
  box-shadow: 0 0 35px 15px rgba(245, 158, 11, 0.3);
  z-index: 2;
  animation: sun-pulse 4s ease-in-out infinite;
}

@keyframes sun-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.1); opacity: 1; }
}

/* 云朵效果 */
.cloud-element {
  position: absolute;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(20px);
  opacity: 0.7;
  z-index: 2;
}

.cloud-left {
  top: 15%;
  left: 10%;
  width: 300px;
  height: 150px;
  border-radius: 100px;
  animation: cloud-float-left 15s ease-in-out infinite;
}

.cloud-right {
  top: 20%;
  right: 10%;
  width: 250px;
  height: 120px;
  border-radius: 100px;
  animation: cloud-float-right 18s ease-in-out infinite;
}

.cloud-top-left {
  top: 8%;
  left: 25%;
  width: 220px;
  height: 110px;
  border-radius: 100px;
  animation: cloud-float-title1 22s ease-in-out infinite;
  opacity: 0.6;
}

.cloud-top-right {
  top: 10%;
  right: 25%;
  width: 200px;
  height: 100px;
  border-radius: 100px;
  animation: cloud-float-title2 19s ease-in-out infinite;
  opacity: 0.6;
}

.cloud-bottom-left {
  bottom: 30%;
  left: 20%;
  width: 180px;
  height: 90px;
  border-radius: 100px;
  animation: cloud-float-left 17s ease-in-out infinite;
  opacity: 0.5;
}

.cloud-bottom-right {
  bottom: 25%;
  right: 15%;
  width: 190px;
  height: 95px;
  border-radius: 100px;
  animation: cloud-float-right 20s ease-in-out infinite;
  opacity: 0.5;
}

/* 添加标题周围的云朵 */
.hyperboost-logo::before {
  content: '';
  position: absolute;
  top: -30px;
  left: 15%;
  width: 180px;
  height: 100px;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(15px);
  opacity: 0.7;
  border-radius: 100px;
  animation: cloud-float-title1 20s ease-in-out infinite;
  z-index: -1;
}

.hyperboost-logo::after {
  content: '';
  position: absolute;
  bottom: -10px;
  right: 20%;
  width: 220px;
  height: 120px;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(15px);
  opacity: 0.7;
  border-radius: 100px;
  animation: cloud-float-title2 25s ease-in-out infinite;
  z-index: -1;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

@keyframes cloud-float-left {
  0%, 100% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(-30px) translateY(15px); }
}

@keyframes cloud-float-right {
  0%, 100% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(20px) translateY(-10px); }
}

@keyframes cloud-float-title1 {
  0%, 100% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(20px) translateY(10px); }
}

@keyframes cloud-float-title2 {
  0%, 100% { transform: translateX(0) translateY(0); }
  50% { transform: translateX(-15px) translateY(-10px); }
}

/* 动态背景 */
.particles-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f5f9ff 0%, #edf5ff 50%, #e5f0ff 100%);
  z-index: 0;
}

.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.02;
  z-index: 1;
}

/* 英雄区域 */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-gradient {
  background: radial-gradient(ellipse at center, rgba(221, 241, 255, 0.3) 0%, transparent 70%);
  opacity: 0.9;
}

.hero-shapes::before {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(147, 197, 253, 0.15) 0%, transparent 70%);
  top: -200px;
  right: -200px;
  filter: blur(50px);
}

.hero-shapes::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(96, 165, 250, 0.15) 0%, transparent 70%);
  bottom: -200px;
  left: -200px;
  filter: blur(50px);
}

/* HyperBoost标题样式 */
.hyperboost-logo {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}

.hyperboost-title {
  font-size: 5rem;
  font-weight: 900;
  line-height: 1;
  padding: 1rem;
  background: linear-gradient(90deg, #4338CA, #3B82F6, #38BDF8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 6px rgba(37, 99, 235, 0.2));
  text-shadow: 0 2px 10px rgba(59, 130, 246, 0.2);
  letter-spacing: 0.05em;
  animation: title-glow 3s ease-in-out infinite, title-float 3s ease-in-out infinite;
}

.chinese-name {
  font-size: 2rem;
  font-weight: 700;
  color: #3B82F6;
  margin-top: -0.5rem;
  letter-spacing: 0.2em;
  background: linear-gradient(90deg, #4338CA, #3B82F6, #38BDF8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(37, 99, 235, 0.15));
  animation: title-float 3s ease-in-out infinite;
}

@keyframes title-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes title-glow {
  0%, 100% { filter: drop-shadow(0 4px 6px rgba(37, 99, 235, 0.2)); }
  50% { filter: drop-shadow(0 4px 12px rgba(37, 99, 235, 0.4)); }
}

@keyframes chinese-name-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@media (min-width: 768px) {
  .hyperboost-title {
    font-size: 8rem;
  }
  
  .chinese-name {
    font-size: 3rem;
    margin-top: -1rem;
  }
}

/* 按钮样式 */
.explore-btn {
  background: linear-gradient(to right, #4338CA, #3B82F6, #0EA5E9);
  color: white;
  font-weight: bold;
  font-size: 1.125rem;
  padding: 1rem 2.5rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(59, 130, 246, 0.4);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.explore-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5);
}

.explore-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(255, 255, 255, 0) 0%, 
    rgba(255, 255, 255, 0.2) 50%, 
    rgba(255, 255, 255, 0) 100%);
  transform: skewX(-30deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    left: -100%; 
  }
  20%, 100% {
    left: 100%;
  }
}

.hero-subtitle-text {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Scroll indicator */
.mouse-icon {
  width: 30px;
  height: 50px;
  border: 2px solid rgba(75, 85, 99, 0.3);
  border-radius: 15px;
  margin: 0 auto;
  position: relative;
}

.mouse-wheel {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #4b5563;
  border-radius: 50%;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  animation: scrollDown 2s ease-in-out infinite;
}

@keyframes scrollDown {
  0%, 100% { opacity: 0; transform: translate(-50%, 0); }
  50% { opacity: 1; transform: translate(-50%, 20px); }
}

.animate-fadeIn {
  animation: fadeIn 1s ease-out;
}

.animate-slideUp {
  animation: slideUp 0.8s ease-out;
}

.animate-slideRight {
  animation: slideRight 0.8s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 特性区域 */
.feature-section {
  position: relative;
  background-color: transparent;
}

.feature-section::before {
  content: '';
  position: absolute;
  height: 100px;
  width: 100%;
  top: -50px;
  left: 0;
  background: linear-gradient(to bottom, rgba(245, 249, 255, 0), #f5f9ff);
  z-index: 1;
}

.feature-card {
  border-radius: 24px;
  overflow: hidden;
  background: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 1px solid rgba(226, 232, 240, 0.8);
  backdrop-filter: blur(8px);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.feature-img-overlay {
  background: linear-gradient(to top, rgba(15, 23, 42, 0.6) 0%, transparent 100%);
  z-index: 1;
}

.feature-tag {
  display: inline-block;
  animation: fadeIn 1s ease-out;
}

.feature-benefits {
  animation: slideUp 1s ease-out;
}

.feature-btn {
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%);
  color: white;
  font-weight: 600;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  transition: all 0.3s ease;
}

.feature-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(79, 70, 229, 0.2);
}

/* 数据统计区 */
.stats-section {
  overflow: hidden;
}

.stats-container {
  max-width: 1100px;
  margin: 0 auto;
}

.stats-bg {
  opacity: 0.95;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}

.stat-item {
  position: relative;
  transition: all 0.3s ease;
  padding: 1rem;
}

.stat-item:hover {
  transform: translateY(-5px);
}

.stat-item::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

/* 机会区域 */
.opportunities-section {
  position: relative;
}

.opportunities-container {
  max-width: 1200px;
  margin: 0 auto;
}

.opportunity-card {
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.opportunity-card-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid rgba(226, 232, 240, 0.8);
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
}

.opportunity-card:hover {
  transform: translateY(-10px) scale(1.02);
}

.tag-custom {
  border-radius: 6px;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  font-size: 0.875rem;
}

.opportunity-btn {
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%);
  color: white;
  font-weight: 500;
  border-radius: 6px;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  transition: all 0.3s ease;
}

.opportunity-btn:hover {
  transform: translateX(5px);
}

/* AI助手区域 */
.ai-assistant-section {
  background-color: #ffffff;
}

.ai-bg-pattern {
  background-image: 
    radial-gradient(#4f46e5 1px, transparent 1px),
    radial-gradient(#4f46e5 1px, transparent 1px);
  background-size: 50px 50px;
  background-position: 0 0, 25px 25px;
}

.ai-badge {
  position: relative;
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.ai-badge-pulse {
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
}

.ai-badge-pulse::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: white;
  animation: pulse 2s ease-in-out infinite;
}

.ai-feature-item {
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.ai-btn {
  position: relative;
  padding: 0.75rem 2rem;
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  color: white;
  font-weight: 600;
  border-radius: 9999px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.ai-btn-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  filter: blur(15px);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.ai-btn:hover .ai-btn-glow {
  opacity: 0.6;
}

.ai-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(139, 92, 246, 0.2);
}

.ai-chat-interface {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.ai-chat-messages {
  flex-grow: 1;
  background-color: #f8fafc;
  padding-bottom: 1rem;
}

.ai-chat-glow {
  bottom: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  filter: blur(100px);
  opacity: 0.05;
  border-radius: 50%;
}

.ai-chat-decoration {
  top: -80px;
  left: -80px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle at center, #f8fafc 2px, transparent 2px);
  background-size: 20px 20px;
  opacity: 0.3;
  transform: rotate(45deg);
}

/* 用户评价区域 */
.testimonials-section {
  position: relative;
  overflow: hidden;
}

.testimonials-pattern {
  background-image: 
    linear-gradient(rgba(139, 92, 246, 0.2) 1px, transparent 1px),
    linear-gradient(to right, rgba(139, 92, 246, 0.2) 1px, transparent 1px);
  background-size: 50px 50px;
}

.testimonial-card {
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.4s ease;
}

.testimonial-card-inner {
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.testimonial-stars {
  --el-rate-void-color: #e2e8f0;
  --el-rate-fill-color: #8b5cf6;
  font-size: 1.5rem;
}

.testimonial-quote {
  z-index: 0;
}

.testimonials-decoration {
  width: 500px;
  height: 500px;
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
  filter: blur(150px);
  opacity: 0.05;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* CTA区域 */
.cta-section {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.cta-card {
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
}

.shadow-glow {
  box-shadow: 0 20px 40px -10px rgba(79, 70, 229, 0.4);
}

.cta-button {
  background: white;
  color: #4338CA;
  font-weight: bold;
  font-size: 1.125rem;
  padding: 1rem 2.5rem;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px rgba(255, 255, 255, 0.3);
}

.cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px -5px rgba(255, 255, 255, 0.4);
  background: linear-gradient(to right, white, #f0f4ff);
}

.bg-cta-pattern {
  background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
  background-size: 30px 30px;
}

.animate-pulse-slow {
  animation: pulseSlow 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulseSlow {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.6;
  }
}

.footer-section {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.footer-stars {
  background-image: radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);
  background-size: 50px 50px;
}

.footer-wave {
  position: relative;
  overflow: hidden;
}

.wave {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' style='fill: %23111827;'/%3E%3C/svg%3E");
  background-size: cover;
  height: 100%;
  width: 100%;
}

.footer-heading {
  position: relative;
  display: inline-block;
}

.footer-heading::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -10px;
  width: 40px;
  height: 2px;
  background: linear-gradient(to right, #3b82f6, #6366f1);
}

.footer-link {
  color: #9ca3af;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-block;
}

.footer-link:hover {
  color: white;
  transform: translateX(5px);
}

/* 响应式调整 */
@media (max-width: 768px) {
  .cta-card {
    padding: 2rem;
  }
  
  .footer-newsletter {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
}

/* 页脚基础样式 */
.footer-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-menu li {
  margin-bottom: 0.75rem;
}

.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  color: #9ca3af;
  transition: all 0.3s ease;
}

.footer-social-link:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%);
  color: white;
  transform: translateY(-3px);
}

.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-contact li {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  color: #9ca3af;
}

.contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  margin-right: 0.75rem;
}

.footer-input {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: white;
  padding: 0.75rem 1rem;
  border-radius: 9999px 0 0 9999px;
  outline: none;
  flex-grow: 1;
}

.footer-subscribe-btn {
  background: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%);
  color: white;
  border: none;
  padding: 0.75rem;
  border-radius: 0 9999px 9999px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 动画效果保持原样 */
@keyframes pulse {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.1); }
}

@keyframes shine {
  0% { opacity: 0; transform: translateX(-100%) rotate(30deg); }
  20% { opacity: 0.5; }
  100% { opacity: 0; transform: translateX(100%) rotate(30deg); }
}

@keyframes particlesMove {
  0% { background-position: 0 0; }
  100% { background-position: 1000px 1000px; }
}

@keyframes backgroundFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-20px) scale(1.02); }
}

@keyframes titleFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .stats-bg {
    transform: skew(0);
  }
  
  .ai-chat-interface {
    margin-top: 3rem;
    height: 400px;
  }
}

/* Feature Badge 样式 */
.feature-badge, .opportunity-badge, .testimonial-badge {
  position: relative;
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.feature-badge {
  background: linear-gradient(135deg, #3b82f6 0%, #4f46e5 100%);
}

.opportunity-badge {
  background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%);
}

.testimonial-badge {
  background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);
}

.feature-badge-pulse, .opportunity-badge-pulse, .testimonial-badge-pulse {
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 50%;
  margin-right: 8px;
  position: relative;
}

.feature-badge-pulse::before, 
.opportunity-badge-pulse::before, 
.testimonial-badge-pulse::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: white;
  animation: pulse 2s ease-in-out infinite;
}
</style>